<!-- 提示信息 -->
<app-tip [type]="tipType"></app-tip>

<div class="table-main">
  <div class="header" style="position: relative;">
    <div class="center">亚米云智慧餐饮
      <div style="position: absolute;right: 0;top: 0;">
        <div class="right" style="position: relative;height: 70px;" (click)="changeRightSpinnerState($event)">
          <i class="fa fa-ellipsis-v" style="font-size: 1em;line-height: 70px;"></i>
          <div
            style="width:100%;position: absolute;top:100%;right: 0;background: #3385ff; color: #fff;border-radius: 2px;font-size: 0.9em;"
            *ngIf="rightSpinnerState">
            <div style="padding: 0 8px;height: 3.5em;line-height: 3.5em;"
                 [routerLink]="['/main/table/change-table']">换台记录
            </div>
            <div style="padding: 0 8px;height: 3.5em;line-height: 3.5em;"
                 [routerLink]="['/main/table/combine-table']">并台记录
            </div>
            <div style="padding: 0 8px;height: 3.5em;line-height: 3.5em;"
                 [routerLink]="['/main/table/reserve-submit']">添加预定
            </div>
            <div style="padding: 0 8px;height: 4em;line-height: 3.5em;" [routerLink]="['/main/table/reserve-list']">预定列表
            </div>
            <div style="padding: 0 8px;height: 4em;line-height: 3.5em;" [routerLink]="['/main/set/default']">个人中心
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

  <!--<app-table-nav [navName]="'tableList'"></app-table-nav>-->

  <div class="table-status" style="">
    <div class="table-sta"><span class="color-block zy" style="border-radius: 3px;">&nbsp;&nbsp;&nbsp;&nbsp;</span><span>在用</span></div>
    <div class="table-sta"><span class="color-block kx" style="border-radius: 3px;">&nbsp;&nbsp;&nbsp;&nbsp;</span><span>空闲</span></div>
    <div class="table-sta"><span class="color-block yd" style="border-radius: 3px;">&nbsp;&nbsp;&nbsp;&nbsp;</span><span>预定</span></div>
  </div>
  <div class="table-list-box">
    <div *ngFor="let v of tableList">
      <div class="table-title">{{v.name}}</div>
      <div class="table-list">
        <div class="table-item" *ngFor="let v1 of v.tableList" (click)="tableInfo(v1)">
          <div class="table-item-text" [ngClass]="{'kx': v1.state == '0', 'zy': v1.state == '1' || v1.state == '3', 'yd': v1.state == '2'}">
            <!--<div style="right:2px;top: 2px;font-size:0.9em;width: 15px;position: absolute;height: 15px;border-radius: 50%;line-height: 15px;" class="yd" *ngIf="v1.booknum > 0">{{v1.booknum}}</div>-->
            <div class="table-info flex">{{v1.name}}</div>
            <div class="table-info flex" *ngIf="v1.state == '0'">（空闲）</div>
            <div class="table-info flex" *ngIf="v1.state == '1'">（就餐中）</div>
            <div class="table-info flex"*ngIf="v1.state == '3' || v1.state == '2'">（已预定）</div>
            <div class="table-info flex">({{v1.people_num}}人) </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div style="text-align: center;padding-top: 20%;color: #666" *ngIf="!tableList.length && !tableFlag">
    <p>
      <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
    </p>
    <p>
      数据正在加载中...
    </p>
  </div>

  <div style="text-align: center;padding-top: 20%;color: #666" *ngIf="!tableList.length  && tableFlag">
    <p>
      <i class="fa fa-info-circle fa-3x" aria-hidden="true"></i>
    </p>
    <p>
      暂时没有桌台信息...
    </p>
  </div>
  <div style="margin-bottom: 5em"></div>
  <div class="table-bottom flex">
    <div class="table-bottom-item active" [routerLink]="['/main']" routerLinkActive="link-active">
      <div><i class="fa fa-th-large"></i></div>
      <div>桌台</div>
    </div>
    <div class="table-bottom-item" [routerLink]="['/main/line-up/line-up-submit']" routerLinkActive="link-active">
      <div><i class="fas fa-users"></i></div>
      <div>排队</div>
    </div>
    <div class="table-bottom-item" [routerLink]="['/main/index']" routerLinkActive="link-active">
      <div><i class="fas fa-utensils"></i></div>
      <div>去开台</div>
    </div>
    <div class="table-bottom-item" [routerLink]="['/main/statistics']" routerLinkActive="link-active">
      <div><i class="fa fa-chart-pie"></i></div>
      <div>报表</div>
    </div>
    <div class="table-bottom-item" [routerLink]="['/main/operation/operation-list']" routerLinkActive="link-active">
      <div><i class="fa fa-bars"></i></div>
      <div>操作台</div>
    </div>
  </div>
</div>
